<!-- 轮播图 -->
<template>
	<view class="page-container">
		<view class="swiper-wrapper">
			<!-- 轮播图 -->
			<view class="swiper-view">
				<swiper :current="currentIndex" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"
					circular style="height: 540px" @change="onSwiperChange">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<a :href="item.url" target="_blank" v-show="item.url!='#'&&item.url!=''">
							<image mode="aspectFill" :src="item.image" alt="轮播图"></image>
						</a>
						<image v-show="item.url =='#'||item.url ==''" mode="aspectFill" :src="item.image" alt="轮播图">
						</image>
					</swiper-item>
				</swiper>
			</view>

			<view class="uni_earch">
				<view class="search_box">
					<uni-easyinput v-model="searchKeyword" primaryColor="#D9001B" placeholderStyle="font-size:16px"
						placeholder="请输入商品名称/型号" @confirm="onSearch"></uni-easyinput>
				</view>
				<!-- 搜索按钮 -->
				<button type="primary" class="search" @click="onSearch" title="搜索">搜索</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bannerImg
	} from '../../utils/http_data.js';
	export default {
		name: 'carousel',
		data() {
			return {
				// 轮播图数据
				swiperList: [],
				// 当前轮播图索引
				currentIndex: 1,
				searchKeyword: '', // 搜索
			};
		},
		mounted() {
			this.bannerImgfun()
		},
		methods: {
			bannerImgfun() {
				bannerImg().then((data) => {
					console.log('轮播图：：', data.data)
					this.swiperList = data.data;
				})
			},
			// 轮播图切换事件
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			// 搜索
			onSearch() {
				console.log("点击搜索：", this.searchKeyword)
				uni.navigateTo({
					url: '/pages/product-center/product-center?searchKeyword=' + this.searchKeyword
				});
			}
		}
	};
</script>

<style>
	/* .page-container .uni-easyinput__content-input {
		width: 850px;
		height: 50px;
	} */
</style>

<style scoped>
	.page-container {}

	.swiper-wrapper {
		position: relative;
	}

	.swiper-wrapper swiper image {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.swiper-view {
		min-width: 1360px;
		/* margin: 0 auto; */
	}

	.uni_earch {
		width: 850px;
		/* height: 60px; */
		position: absolute;
		bottom: 6px;
		left: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
		border-radius: 12px;
		display: flex;
	}

	.page-container /deep/ .uni-easyinput__content-input {
		height: 50px;
		font-size: 16px;
		/* border: 1px solid #000; */
	}
	.page-container /deep/ .uni-easyinput {
		width: 100%;
	}
	.page-container /deep/ .content-clear-icon {
		cursor: pointer;
	}


	.page-container /deep/ .is-input-border {
		border-radius: 5px 0 0 5px;
		/* opacity: 0.7; */
		background-color: rgba(255, 255, 255, 0.9) !important;
		border: 1px solid #cdcdcd !important;
	}


	.search_box {
		width: 750px;
		height: 50px;
	}

	.uni-searchbar {
		background-color: #F9F9F9;
		border: 1px solid #DADFE3;
		border-radius: 12px;
	}

	.search {
		width: 100px;
		height: 52px;
		background-color: #D9001B;
		border-radius: 0 5px 5px 0;
		line-height: 52px;
	}

	.search:hover {
		background-color: rgba(217, 0, 27, 0.8);
	}
</style>